<template>
  <!-- 实名检测 页面 -->
  <div class="shiming-page ">
    <h2 style="text-align: center;">实名检测</h2>
    <div style="text-align: center;">
      <span style="color: #666;">温馨提示：数据来源于第三方 每检测一次消耗3虞豆。</span>
    <br/>
    介绍：通过电信运营商验证手机号与姓名是否一致。
    </div>
    <div>
      <el-form :model="checkForm" ref="checkForm" :rules="rules" :inline="true" class="checkBox" label-width="80px">
        <el-form-item label="姓名" prop="inputName">
          <el-input v-model="checkForm.inputName" placeholder="请输入" clearable size="small" />
        </el-form-item>
        <el-form-item label="手机号" prop="inputMobile">
          <el-input v-model="checkForm.inputMobile" placeholder="请输入" clearable size="small" />
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" size="small" @click="check" class="zdy-btn" :loading="loading">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="zdy-main">
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="80px">
        <el-form-item label="姓名" prop="inputName">
          <el-input v-model="queryParams.inputName" placeholder="请输入" clearable size="small" />
        </el-form-item>
        <el-form-item label="手机号" prop="inputMobile">
          <el-input v-model="queryParams.inputMobile" placeholder="请输入" clearable size="small" />
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" size="small" @click="search" class="zdy-btn">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small"  @click="resetQuery"
            class="zdy-btn zdy-btn-refresh">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData.records" border>
        <el-table-column label="时间" prop="createTime" width="160" ></el-table-column>
        <el-table-column label="查询姓名" prop="inputName" width="150"/>
        <el-table-column label="查询手机号" prop="inputMobile" width="150"/>
        <el-table-column label="验证结果" prop="bankStatus"  align="left">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.bankStatus=='01'" type="success">一致</el-tag>
            <el-tag v-if="scope.row.bankStatus=='02'" type="danger">不一致</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="验证结果" prop="bankCity">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.bankStatus=='01'" type="success">验证通过</el-tag>
            <el-tag v-if="scope.row.bankStatus=='02'" type="danger">验证不通过</el-tag>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="归属地" prop="bankCity">
          <template slot-scope="scope">
            <span>{{ scope.row.bankProvince }}{{ scope.row.bankCity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运营商" prop="bankMobileType" width="100" />
        <el-table-column label="归属地编号" prop="bankAddrCode" />
        <el-table-column label="区号" prop="bankTelCode" /> -->
      </el-table>
      <div class="pages-box">
        <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>
  </div>
</template>

<script>
import shimingApi from "@/api/utilsPages/shimingTest.js"
import shengyu from '@/components/yudu/shengyu.vue';
export default {
  name: "",
  components: {shengyu},
  data() {
    var phoneCheck = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确'));
      } else {
        callback()
      }
    };
    return {
      tableData: {
        records: [],
        total: 0
      },
      loading: false,
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      checkForm: {
        inputMobile: '',
        inputName: ''
      },
      rules: {
        inputMobile: [
          { required: true, message: "请输入", trigger: "blur" },
          { validator: phoneCheck, trigger: 'blur' }
        ],
        inputName: [
          { required: true, message: "请输入", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询实名
    check() {
      this.$refs['checkForm'].validate(valid => {
        if (valid) {
          this.loading = true
          shimingApi.check(this.checkForm).then(res => {
            // //console.log("%c Line:117 🥓 res", "color:#ffdd4d", res);
            this.getList()
            this.loading = false
           this.$refs.shengyu.getNumber()
          }).catch(err=>{
            this.getList()
            this.loading = false
          })
        } else {
          this.$alert("请填写完整！");
        }
      });
    },




    // 获取列表
    getList() {
      this.tableData.records = [];
      this.loading = true;
      shimingApi
        .getList(this.queryParams)
        .then(response => {
          //console.log("%c Line:151 🍬 response", "color:#4fff4B", response);
          this.tableData.total = response.total
          this.loading = false;
          this.tableData.records = response.rows;
        })
        .catch(err => {
          this.loading = false;
        });

    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1
      this.getList();
    },
    //重置
    resetQuery() {
      this.queryParams= {
        pageSize: 10,
        pageNum: 1
      }
      this.getList();
    },

  }
};
</script>
<style lang="scss" scoped>
.checkBox {
  width:850px;
  margin: 0 auto;
}
.zdy-main{
  padding: 10px;
  background: #fff;
}
.shiming-page{
  margin-top: 16px;
}
</style>
